<template>
  <div >
    <div style="width: 100%;">
      <el-form :inline="true" style="align-content: center; text-align: center">
        <el-form-item>
          <el-input
              v-model="searchData"
              style="width:500px"
              placeholder="搜索任务"
              clearable
          >
          </el-input>
        </el-form-item>
        <!--      搜索按钮-->
        <el-form-item>
          <el-button @click="searchModels(userId,searchData)" type="primary" plain>搜索</el-button>
        </el-form-item>

<!--        新增按钮-->
        <el-form-item>
          <el-button @click="createModel" type="primary" plain>新增任务</el-button>
        </el-form-item>

      </el-form>

      <!--    list展示部分-->
      <!-- 展示用户列表 -->
      <el-card shadow="always"
               v-for="model in models"
               :key="model.id"
               class="card">
        <div slot="header" class="clearfix" style="
        color: #409eff;font-size: 20px;
        padding-bottom: -10px;
        margin-bottom: -10px;" >
          <span style="height: 2px"></span>
          {{model.modelName}}
        </div>
        <el-card shadow="hover" style="
        height: 120px; text-align: left;
         margin-top: -5px;overflow: auto;">
          {{model.modelIntro}}
        </el-card>
        <div class="bt1">
<!--运行model-->
            <el-button v-bind:icon="selfdefine"
                       style="float: left;
                             margin-left: 1% ;
                             margin-bottom: 1%;
                             vertical-align: center"
                              :loading="loading" type="success"
                       circle @click="runModel(userId,model.id)">
            </el-button>
<!--编辑model-->
            <el-button  icon="el-icon-edit"
                        style=" margin-right: 1% ;
                            margin-bottom: 1%;
                            vertical-align: center"
                        circle shadow="hover" type="primary"
                        @click="editModel(userId,model.id)">
            </el-button>
<!--删除model-->
          <el-button @click="delModel(userId,model.id)"
                     icon="el-icon-delete"
                     style="float: right;
                            margin-right: 1% ;
                            margin-bottom: 1%;
                            vertical-align: center"
                     type="danger"
                     circle>
          </el-button>
        </div>
      </el-card>

    </div>

<!--    新增model-->
        <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="50%" >
          <el-form :model="createForm" :rules="rules"
                   ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="任务名称" prop="modelName">
              <el-input v-model="createForm.modelName"
                        placeholder="请输入内容"></el-input>
            </el-form-item>
            <el-form-item label="任务简介" prop="modelIntro">
              <el-input v-model="createForm.modelIntro"
                        placeholder="请输入内容"
                        type="textarea"
                        :autosize="{ minRows: 1, maxRows: 4}"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm()">立即创建</el-button>
              <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>

  </div>
</template>

<script>
export default {
  name: "User",
  data() {
    return{
      selfdefine:'el-icon-refresh',
      dialogVisible:false,
      userId:'',
      searchData:'',
      models: [
        /*{
          modelName: "计算机系统简介",
          modelIntro: "计算机系统由两大部分组成：硬件和软件。软件又包括系统软件和应用软件。"
        },
        {
          modelName: "计算机的基本组成",
          modelIntro: "上图实线表示数据流动，虚线表示控制反馈.计算机结构由五大部件组成：存储器、运算器、控制器、输入设备、输出设备。"
        },
        {
          modelName: "计算机的基本组成",
          modelIntro: "上图实线表示数据流动，虚线表示控制反馈.计算机结构由五大部件组成：存储器、运算器、控制器、输入设备、输出设备。"
        },
        {
          modelName: "计算机的基本组成",
          modelIntro: "上图实线表示数据流动，虚线表示控制反馈.计算机结构由五大部件组成：存储器、运算器、控制器、输入设备、输出设备。"
        },*/
      ],
      createForm: {
        modelName: '',
        modelIntro: ''
      },
      rules: {
        modelName: [{
          required: true, message:'请输入模型名称', trigger:'blur'
        }],
        modelIntro: [{
          required: true, message:'请输入模型简介', trigger:'blur'
        }]
      },
      loading: false,
    }
  },

  created() {
    this.userId = this.$route.query.userId;
    this.getModels(this.userId)
  },

  methods: {
    //得到所有的数据
      getModels(userId) {
        this.$axios.get(`/user/${userId}/model`)
            .then(res => {
          this.models = res.data.data
        })
        .catch(function (error){
          console.log(error);
        })
      },
    //搜索数据
      searchModels(userId,searchData) {
        this.$axios.get(`/user/${userId}/model/search?searchData=${searchData}`)
            .then(res => {
          this.models = res.data.data
        })
        .catch(function (error){
          console.log(error);
        })
      },
    //添加数据
      createModel() {
        this.dialogVisible = true
    },

    submitForm() {
          this.$axios.post(`/user/${this.userId}/model`, this.createForm)
              .then(res => {
                this.$message({
                  showClose: true,
                  message: '恭喜你，操作成功',
                  type: 'success',
                  onClose:() => {
                    this.getMenuTree()
                  }
                });
                this.dialogVisible = false
                this.getModels(this.userId)
              })
    },

    //运行model
    runModel(userId, modelId) {
        if (this.selfdefine == 'el-icon-refresh') {
          this.loading = true;
          this.$axios.put(`/user/${userId}/${modelId}/run`)
              .then(res => {
                if (res.data.code == 200) {
                  let flag = true;
                  this.runMod2(userId, modelId, flag);
                }
                console.log(res);
              })
              .catch(function (error) {
                console.log(error);
              })
        }
        else {
          this.$router.push({
            path: '/sys/show',
            query: {userId:userId, modelId:modelId}
          })
        }
    },

    runMod2(userId, modelId, flag) {
      this.$axios.get(`user/${userId}/${modelId}/run`)
      .then(res => {
        if(res.data.data == 1) {
          window.clearInterval()
          this.loading = false;
          this.selfdefine = 'el-icon-check';
        }
        else {
         if(flag) {
           const that = this;
           flag = false;
           window.setInterval(() => {
                 setTimeout(that.runMod2(userId,modelId,flag),4500)},
               4500)
         }
        }
      })
    },


    //删除model
    delModel(userId,modelId) {
      this.$axios.delete(`/user/${userId}/model/${modelId}`, {
        userId : userId,
        modelId: modelId})
          .then(function (res) {
            //this.getModels(this.userId);
          })
          .catch(function (error) {
            console.log(error);
          })
      setTimeout(this.getModels(this.userId),100);
      // this.getModels(this.userId);
    },
    //编辑model
    editModel(userId,modelId) {
      this.$router.push({
        path: "/sys/menus",
        query: {userId:userId, modelId:modelId}
      })
    },
  }
}
</script>


<style scoped lang="css">
.text2 {
  font-family: "Adobe 宋体 Std L",serif;
  font-size: 82px;
}

.card {
  float: left;
  width: 30%;
  /*padding: .75rem;*/
  margin-bottom: 2rem;
  /*padding-left: 1.5%;*/
  /*padding-right: 1.5%;*/
  margin-left: 1%;
  margin-right: 1%;
  border: 0.5px solid #efefef;
  text-align: center;
}

.card > img {
  margin-bottom: .75rem;
  border-radius: 80px;
}
.bt1 {
  margin-top: 5%;
  margin-bottom: -3%;
}

.card-text {
  font-size: 85%;
}

.infomation {
  border: 0.5px solid #9d9d9d;
  background-color: lightgrey;
  font-size: large;
  width: 90%;
  height: 150px;
  margin-left: 5%;
  display: flex;
  justify-content: center;
}
.infomation1 {
  border: 0.5px solid #9d9d9d;
  background-color: lightgrey;
  font-size: medium;
  width: 90%;
  height: 120px;
  margin-left: 5%;
  display: flex;
  justify-content: center;
}

.el-card ::v-deep {
  background-color: rgba(188,206,218,0.2);
}

/**修改全局的滚动条*/
/**滚动条的宽度*/
::-webkit-scrollbar {
  width: 8px;

}
::-webkit-scrollbar-thumb {
    background-color: #eaecf1;
    border-radius: 3px;
  }

</style>